<!DOCTYPE html>
<html lang="zh-CH">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="featon inc." name="author">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/vendor/jqPagination/css/jqpagination.css" rel="stylesheet">
    <link href="/static/vendor/datetimepicker/jquery.datetimepicker.css" rel="stylesheet">
    <link href="/static/vendor/skin/ftskin.css" rel="stylesheet">
    <title>产量管理</title>
    <style>
        #page .pagination a {
            height: auto;
            width: 50px;
        }

        #qrcode {
            width: 100%;
            height: 100%;
        }
        .myloading {
            display: flex;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            background-color: rgba(255, 255, 255, 0.7);
            justify-content: space-around;
            align-items: center;
        }
        .glyphicon-refresh {
            font-size: 32px;
            animation: myloading linear 2s infinite;
        }
        @keyframes myloading {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(360deg)
            }

        }
    </style>
</head>
<body>
<div class="ft-subpage-wrapper container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="tools-box">
                <div class="form-inline">
                    <div class="form-group">
                        <button class="btn btn-info" onclick="openAddPage()" type="button"><span
                                aria-hidden="true" class="glyphicon glyphicon-plus"></span> 添加
                        </button>
                        <button class="btn btn-warning" onclick="updateRecord(table,'id','openUpdatePage()');"
                                type="button"><span
                                aria-hidden="true" class="glyphicon glyphicon-edit"></span> 修改
                        </button>
                        <button class="btn btn-danger" onclick="deleteRecord(table,'id','deleteObject()');"
                                type="button"><span
                                aria-hidden="true" class="glyphicon glyphicon-remove"></span> 删除
                        </button>
                    </div>

                    <span style="float:right;">
			<table border="0" cellpadding="0" cellspacing="0" style="text-align:left;padding-right:5px;float:right">
				<tr>
					<td width="300">
						<div class="input-group">
							<input class="form-control" id="searchText" oninput="search(this.value)"
                                   oonpropertychange="search(this.value)" placeholder="关键字" type="search">
							<span class="input-group-btn">
								<button class="btn btn-info" id="search" type="button"><span aria-hidden="true"
                                                                                             class="glyphicon glyphicon-search"></span> 查询</button>
							</span>
						</div>
					</td>
				</tr>
			</table>
          </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" id="table" style="text-align: center">
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="container-fluid">
            <div id="turn">

            </div>
        </div>
    </div>
    <!-- /.row 证书-->
</div>
<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">产品照片</h4>
            </div>
            <div class="modal-body" style="text-align: center;overflow: auto">
                <img alt="产品照片" class="img" src="" style="height: 450px">
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="replaceImg('prev')" type="button">上一张</button>
                <button class="btn btn-default" onclick="replaceImg('next')" type="button">下一张</button>
                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>


<script src="/static/vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendor/jqPagination/js/jquery.jqpagination.min.js"></script>
<script src="/static/vendor/skin/js/ft-ui.js"></script>
<script src="/static/vendor/skin/js/table-common.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<script src="/static/vendor/skin/js/jquery.c.js"></script>
<script src="/static/vendor/qrcode/qrcode.min.js"></script>
<script src="/static/vendor/qrcode/myloading.js"></script>

<script>
    var tp = new TurnPage();
    var table = new Table();
    table.table_name = "table_list";
    var resultList = null;
    var beanList = null;
    var con_map = new Map();
    tp.setPageSize(10)

    $("ul").on("click", "li", function () {
        tp.curr_page = $(this).text()
        $(this).addClass("active")
        $(this).siblings().removeClass("active")
        loadListble()
    })


    function initTable() {
        var colsMap = new Map();
        var colsList = new List();
        colsList.add(setTitleClos("serialNumber", "序号", "40px", "", "", ""));
        colsList.add(setTitleClos("productNo", "产品批号", "100px", "", "", ""));
        colsList.add(setTitleClos("Cp_id", "产品名称", "100px", "", "", ""));
        colsList.add(setTitleClos("scVal", "产量", "100px", "", "", ""));
        colsList.add(setTitleClos("scDate", "生产日期", "100px", "", "", ""));
        colsList.add(setTitleClos("remark", "备注", "100px", "", "", ""));
        colsList.add(setTitleClos("detail", "产品详情", "100px", "", "", ""));
        colsList.add(setTitleClos("action", "&nbsp;&nbsp;&nbsp;操作", "100px", "", "", ""));
        //table.checkBox = false;
        table.setColsList(colsList);
        table.setAllColsList(colsList);
        table.enableSort = false;//禁用表头排序
        table.onSortChange = showList;
        table.show("table");//里面参数为外层div的id
    }

    function loadListble() {
        tp.curr_page = 1;
        showList();
        showTurnPage();
    }

    function showList() {
        con_map.put("start_num", parseInt(tp.getStart()));
        con_map.put("page_size", parseInt(tp.pageSize));
        resultList = top.ajax.synclBody("/py/getListByPage", con_map.toJSON())
        beanList = resultList.productYields;
        console.log(beanList)
        curr_bean = null;
        table.setBeanList(beanList, "td_list");//设置列表内容的样式
        table.show("table");
        tp.setTotal(resultList.count)
        table.getCol("action").each(function (i) {
            if (i > 0) {
                $(this).html('<a href="javascript:openUpdatePage(\'' + beanList[i - 1].id + '\')">编辑</a>&nbsp;&nbsp;<a href="javascript:deleteObject(\'' + beanList[i - 1].id + '\')">删除</a>');
            }
        });
        table.getCol("Cp_id").each(function (i) {
            if (i > 0) {
                $(this).text(beanList[i - 1].productInfo.proName)
            }
        });
        table.getCol("scDate").each(function (i) {
            if (i > 0) {
                $(this).text($(this).text().replace("T", "  "))
            }
        });
        table.getCol("serialNumber").each(function (i) {
            if (i > 0) {
                $(this).html(`<span style="font-weight: bold">` + i + `</span>`);
            }
        });


        table.getCol("detail").each(function (i) {
            if (i > 0) {
                $(this).html(`<a href="javascript:openDetail(` + beanList[i - 1].cpId + `)"
                            title="请使用手机扫描下方二维码" data-container="body"   data-trigger="focus"
                            data-toggle="popover" data-placement="bottom"
                            data-content="<div id='qrcode' style='width=100%;height=100%'></div>" >手机查看</a>`);
            }
            $("[data-toggle='popover']").popover({html: true});
        });
        table_input_init(table.table_name);
    }

    jQuery(function ($) {
        initTable();
        loadListble()
        let total = tp.getTotal();
        let pageSize = tp.getPageSize();
        let countPage = Math.ceil(parseInt(total) / parseInt(pageSize));
        for (let i = 1; i <= countPage; i++) {
            if (i === 1) {
                $("#next").before(`<li  class="active"><a href="JavaScript:">` + i + `</a></li>`)
            } else {
                $("#next").before(`<li ><a href="JavaScript:">` + i + `</a></li>`)
            }
        }
        $("[data-toggle='popover']").popover();
    });

    function showTurnPage() {
        tp.total = tp.getTotal()
        tp.show("turn", "");
        tp.onPageChange = showList;
    }

    function openAddPage() {
        top.addTab('/farm/addPy');
    }

    function openUpdatePage(id) {
        var sel_id = '';
        if (id !== '' && id != null) {
            sel_id = id;
        } else
            sel_id = table.getSelecteCheckboxValue("id");
        top.addTab('/farm/addPy?id=' + sel_id);
    }

    function openDetail(id) {
        $('#qrcode').empty();
        let loading = $('#qrcode').myloading('show');
        setTimeout(function () {
            loading.myloading('hide');
            let qrcode = new QRCode(document.getElementById("qrcode"), {
                width: '160',
                height: '160'
            });
            let time = new Date().getTime();
            let encryptionParameters =time+"_"+id
            /*TODO 服务器外网ip*/
            let url = 'http://1.82.133.117:8083/sys_pm/goDetail/' + encryptionParameters;
            qrcode.makeCode(url);
        },300);
    }

    function deleteObject(id) {
        var sel_id = '';
        if (id !== '' && id != null) {
            sel_id = id;
        } else
            sel_id = table.getSelecteCheckboxValue("id");
        var dm = new Map();
        dm.put("id", sel_id);
        top.layer.confirm("删除后信息不可恢复，请谨慎操作！！！", {
            icon: 3,
            skin: 'layer-ext-moon',
            btn: ['是', '取消'] //按钮
        }, function () {
            if (top.ajax.synclBody("/py/deleteProductYield", dm.toJSON())) {
                modelWindow.alert("检测信息" + top.CMSLang.Delete_success);
                loadListble();
            } else {
                modelWindow.error("检测信息" + top.CMSLang.Delete_fail);
            }
        });

    }

    $("#search").click(function () {
        let val = $("#searchText").val().trim();
        if (val !== '') {
            searchList(val);
        } else {
            alert('空的')
        }
    })

    function search(val) {
        if (val.trim() === '') {
            con_map.clear();
            loadListble();
        }
    }

    function searchList(val) {
        con_map.put("start_num", parseInt(tp.getStart()));
        con_map.put("page_size", parseInt(tp.pageSize));
        let cols = ['qyId', 'productNo', 'Cp_id', 'scVal', 'scDate', 'remark']
        con_map.put("arg", val);
        resultList = top.ajax.synclBody("/py/getSearchListByPage", con_map.toJSON())
        beanList = resultList.companies;
        tp.setTotal(resultList.count)
        table.setBeanList(beanList, "td_list");//设置列表内容的样式
        table.show("table");
        table.getCol("action").each(function (i) {
            if (i > 0) {
                $(this).html('<a href="javascript:openUpdatePage(\'' + beanList[i - 1].id + '\')">编辑</a>&nbsp;&nbsp;<a href="javascript:deleteObject(\'' + beanList[i - 1].id + '\')">删除</a>');
            }
        });
        table.getCol("Cp_id").each(function (i) {
            if (i > 0) {
                $(this).text(beanList[i - 1].productInfo.proName)
            }
        });
        table.getCol("scDate").each(function (i) {
            if (i > 0) {
                $(this).text($(this).text().replace("T", "  "))
            }
        });
        table.getCol("serialNumber").each(function (i) {
            if (i > 0) {
                $(this).html(`<span style="font-weight: bold">` + i + `</span>`);
            }
        });
        let cssText = `<span style="color: red;font-weight: bold">` + val + `</span>`
        for (let col of cols) {
            table.getCol(col).each(function (i) {
                if (i > 0) {
                    $(this).html($(this).text().replace(val, cssText));
                }
            });
        }
        table.getCol("detail").each(function (i) {
            if (i > 0) {
                $(this).html(`<a href="javascript:openDetail(` + beanList[i - 1].cpId + `)"
                            title="请使用手机扫描下方二维码" data-container="body"   data-trigger="focus"
                            data-toggle="popover" data-placement="bottom"
                            data-content="<div id='qrcode' style='width=100%;height=100%'></div>" >手机查看</a>`);
            }
            $("[data-toggle='popover']").popover({html: true});
        });
        table_input_init(table.table_name);
        showTurnPage();
    }
</script>

</body>
</html>
